<template>
  <!--热门推荐-->
  <div class="index-record bg-fff mb-20 border-top border-bottom pt-30" v-if="hotRecommendList.length">
    <div class="record-titl f34 color-333 text-center fontbold px-30 ">热门推荐</div>
      <ul>
      <li class="record-conn px-30" v-for="elem in currentList" @click="nextPage(elem)">
        <div class="demolist border-top py-30">
          <div class="mbgmes-img fl mt-10">
            <img :src="elem.gameImage">
            <div class="img_bj bg-000"></div>
            <div class="img-text f24 color-fff text-center">{{elem.goodsTypeName=='游戏帐号'?'精品帐号':elem.goodsTypeName}}</div>
           </div>
          <div class="mbgmes-con-index mbgmes-ico">
            <div class="mbl-title f32 color-000">{{elem.gameName}}{{elem.goodsTypeName=='游戏帐号'?'精品帐号':elem.goodsTypeName}}</div>
            <div class="mbl-cper">
              <div class="mbl-money color-m1 f30 fl" v-if="elem.recommendType===2">{{elem.latestInformation}}</div>
              <div class="mbl-money color-m1 f30 fl" v-else>1元={{elem.unitName?(elem.unitName.includes('万')?parseInt(elem.latestInformation/10000):elem.latestInformation):''}}{{elem.unitName}}</div>
            </div>
            <div class="mbl-parea color-666 f26" v-if="elem.regionName&&elem.serverName">{{elem.regionName}}/{{elem.serverName}}</div>
            <div class="mbl-parea color-666 f26" v-else>全区全服</div>
          </div>
        </div>
      </li>
      </ul>

      <div class="tab-more border-top" v-show="hotRecommendList.length>currentList.length" @click="readMore"><a class="pend-more"></a></div>

  </div>
</template>
<script>
import {HomeApi} from 'api/home'
export default {
  data() {
    return {
      hotRecommendList: [],
      pageIndex: 1,
      pageSize: 5,
    }
  },
  computed: {
    currentList() {
      return this.hotRecommendList.slice(0, this.pageIndex*this.pageSize)
    }
  },
  created() {
    this.getHotRecommendList()
  },
  methods: {
    readMore() {
      this.pageIndex++
    },
    nextPage(item) {
      //只有Location.href跳转返回浏览器才会记录位置
      if (item.recommendType===2&&item.gameType===2) {
        //手游账号
        // this.$router.push({
        //   name:'MobileGameList',
        //   params: {
        //     gameId: item.gameId,
        //     gameName: item.gameName,
        //     goodsType: 2
        //   },
        //   query: {
        //     platformId: item.platformId,
        //     clientId: item.regionId,
        //     serverId: item.serverId,
        //     platformName: item.platformName,
        //     clientName: item.regionName,
        //     serverName: item.serverName
        //   }
        // })
        location.href = `
          /vue/mobile-game/goods-list2/${item.gameId}/${item.gameName}/2?${item.platformId?'platformId='+item.platformId +'&':''}${item.regionId?'regionId=' + item.regionId+'&':''}${item.serverId?'serverId='+item.serverId+'&':''}${item.platformName?'platformName='+item.platformName+'&':''}${item.clientName?'clientName='+item.clientName+'&':''}${item.serverName?'serverName='+item.serverName+'&':''}
           `
      } else if (item.recommendType===2&&item.gameType===1) {
        //端游账号
        // this.$router.push({
        //   name:'PcGoodsList',
        //   params:{
        //     gameId: item.gameId,
        //     gameName: item.gameName,
        //     goodsType:2,
        //   },
        //   query: {
        //     areaId: item.regionId,
        //     serverId: item.serverId,
        //     areaName: item.regionName,
        //     serverName: item.serverName
        //   }
        // })
        location.href = `
          /vue/pcGoodsList/${item.gameId}/${item.gameName}/2?${item.areaId?'areaId='+item.regionId+'&':''}${item.regionId?'regionId='+item.regionId+'&':''}${item.serverId?'serverId='+item.serverId+'&':''}${item.areaName?'areaName='+item.regionName+'&':''}${item.serverName?'serverName='+item.serverName+'&':''}
          `
      } else if (item.recommendType===3&&item.gameType===1) {
        // this.$router.push({
        //   name:'ListCoins',
        //   query: {
        //     gameId: item.gameId,
        //     gName: item.gameName,
        //     gameType: item.gameType,
        //     goodsType: '3',
        //     typename: '游戏币',
        //     areaId: item.regionId,
        //     aName: item.regionName,
        //     serverId: item.serverId,
        //     servername: item.serverName,
        //     areaname: item.regionName,
        //     serverid: item.serverId,
        //     areaid: item.regionId,
        //     gid: item.gameId,
        //     gname: item.gameName,
        //   }
        // })
        location.href = `
          /vue/coins-type/list-coins?gameId=${item.gameId}&gName=${item.gameName}&gameType=${item.gameType}&goodsType=3&typename=游戏币
          &areaId=${item.regionId}&aName=${item.regionName}&serverId=${item.serverId}&servername=${item.serverName}&areaname=${item.regionName}
          &serverid=${item.serverId}&areaid=${item.regionId}&gid=${item.gameId}&gname=${item.gameName}
          `
      } else {
        // this.$router.push({
        //   name:'TradeStone',
        //   query: {
        //     gameId: item.gameId,
        //     gName: item.gameName,
        //     gameType: item.gameType,
        //     tradeType: '5',
        //     goodsType: item.recommendType.toString(),
        //     typename: item.goodsTypeName,
        //     areaId: item.regionId,
        //     aName: item.regionName,
        //     serverId: item.serverId,
        //     servername: item.serverName,
        //     areaname: item.regionName,
        //     serverid: item.serverId,
        //     areaid: item.regionId,
        //     gid: item.gameId,
        //     gname: item.gameName,
        //   }
        // })
        location.href = `
          /vue/trade-coins/trade-stone?gameId=${item.gameId}&gName=${item.gameName}&gameType=${item.gameType}&goodsType=${item.recommendType}&typename=${item.goodsTypeName}
          &areaId=${item.regionId}&aName=${item.regionName}&serverId=${item.serverId}&servername=${item.serverName}&areaname=${item.regionName}
          &serverid=${item.serverId}&areaid=${item.regionId}&gid=${item.gameId}&gname=${item.gameName}
          `
      }
    },
    getHotRecommendList() {
      HomeApi.HotRecommend().then(
        res => {
          if (res.ok && res.data.data) {
            this.hotRecommendList = res.data.data
          }
        },
        err => {
          console.log(err);
        }
      )
    }
  }
}
</script>
<style scoped>
/*历史记录*/
.index-record{ height:auto; display:block; overflow:hidden;}
.index-record .record-titl{ height:0.52rem; line-height:0.52rem;}
.index-record .record-conn{ height:auto; display:block; overflow:hidden;}
.index-record .record-conn .demolist{ height:auto; display:block; overflow:hidden; position: relative;}
.index-record .record-conn:first-child .demolist { border-top:none; }
.record-conn .demolist .mbgmes-img{ width:1.28rem; overflow:hidden; position:relative; height:1.28rem; line-height:1.28rem; background:#f1f1f1; border-radius:15%;}
.record-conn .demolist .mbgmes-img img{ height: 1.28rem;vertical-align: top;}
.record-conn .demolist .mbgmes-img div.img_bj{ height:0.38rem; opacity:0.7; width:100%; position:absolute; bottom:0; }
.record-conn .demolist .mbgmes-img div.img-text{height:0.38rem; line-height:0.38rem; width:100%; position:absolute; bottom:0;}
.record-conn .demolist .mbgmes-con-index{ margin-left:1.60rem;  height:auto; display:block; overflow:hidden;}
.record-conn .demolist .mbgmes-ico{ background:url(~images/index/mbgmes-ico.png) no-repeat right center; background-size:0.16rem;}
.record-conn .demolist .mbgmes-con-index .mbl-title{ line-height:0.48rem;}
.record-conn .demolist .mbgmes-con-index .mbl-cper{height:auto; display:block; overflow:hidden;}
.record-conn .demolist .mbgmes-con-index .mbl-cper .mbl-money{ height:0.68rem; line-height:0.68rem;}
.record-conn .demolist .mbgmes-con-index .mbl-cper .mbl-icon{height: 0.68rem}
.tab-more{ height:1rem; line-height:1rem; text-align:center;}
.tab-more a.more{ display:inline-block;}
.tab-more a.pend-more{height:1rem; background:url(~images/index/pend-more-ico.png) no-repeat center center; background-size:0.28rem; display:block;}
.tab-more a.pend-more-hov{height:1rem; background:url(~images/index/pend-more-ico-hov.png) no-repeat center center; background-size:0.28rem; display:block;}

</style>
